import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import { Form, Input, Select, Space, Button, DatePicker } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { apiStockOutLibraryPage, apiStockOutLibraryDel } from '@/request/storageManager/outPut.js'
import TheQueryForm from '../../../components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
const dataTypes = [{ label: '商城销售出库单', value: '0', }, { label: '门店销售出库单', value: '1', }, { label: '调拨出库单', value: '2', }, { label: '手动创建出库单', value: '3', }, { label: '发起砍价', value: '4', }, { label: '收银台出库单', value: '5', }]

class OutPut extends Component {
    constructor() {
        super()
        this.formRef_search = React.createRef()
        this.queryFormRef = React.createRef()

        this.state = {
            columns: [
                {
                    title: "出库单号",
                    dataIndex: "code",
                    key: "code",

                },
                {
                    title: "出库日期",
                    dataIndex: "finishTime",
                    key: "finishTime",

                },
                {
                    title: "出库类型",
                    dataIndex: "dataType",
                    key: "",
                    render: (text, render) => {
                        let obj = dataTypes.find(item => item.value == text);
                        return obj === undefined ? '' : obj.label
                    }
                },
                {
                    title: "出库仓库",
                    dataIndex: "libraryName",
                    key: "libraryName",

                },
                {
                    title: "状态",
                    dataIndex: "status",
                    key: "status",
                    render: (text) => {
                        if (text == 0) {
                            return '未完成'
                        } else {
                            return '已完成'
                        }
                    }

                },
                {
                    title: "登记人",
                    dataIndex: "createUserName",
                    key: "createUserName",

                },
                {
                    title: "登记日期",
                    dataIndex: "createTime",
                    key: "createTime",

                }, {
                    title: "操作",
                    dataIndex: "serviceShowFile",
                    key: "serviceShowFile",
                    render: (text, render) => {
                        return <div>
                            <TheButton haspermi={['storage:outPut:view']} onClick={() => this.view(render.id, render.dataType)}>查看详情</TheButton>
                            {
                                render.status == 0 && ![0, 1, 4, 5].includes(render.dataType) ?
                                    <TheButton haspermi={['storage:outPut:del']} onClick={() => this.del(render)}>删除</TheButton>
                                    :
                                    null
                            }

                        </div>
                    }
                },
            ],
            dataSource: [],
            pageData: {
                pageNo: 1,
                pageSize: 10

            },
            total: 0,
            code: '',
            newColumns: [],
            form_show: true,
            searchOption: [
                { field: 'code', label: '出库单号', placeholder: '请输入出库单号', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'libraryName', label: '出库仓库', placeholder: '请选择出库仓库', required: false, rules: [], type: 'Input', options: [], defaultValue: '' },
                { field: 'dataType', label: '出库类型', placeholder: '请选择出库类型', required: false, rules: [], type: 'Select', options: dataTypes, defaultValue: '' },
                { field: 'status', label: '状态', placeholder: '请选择状态', required: false, rules: [], type: 'Select', options: [{ label: '未完成', value: '0', }, { label: '已完成', value: '1' }], defaultValue: '' },
                { field: 'createUserName', label: '登记人', placeholder: '请输入登记人', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'times', label: '出库日期', placeholder: '', required: false, rules: [], type: 'RangePicker', defaultValue: '' },
            ],
            queryForm: {},
        }
    }
    componentDidMount() {
        this.onColumnsFilter(this.state.columns)
        let searchParams = store.getState().searchValue
        let { pageNo, pageSize, queryForm, pathName } = searchParams
        if (searchParams && pageNo && pathName == 'storageOutPut') {
            this.setState({
                queryForm,
                pageData: {
                    pageNo: pageNo, pageSize: pageSize
                }
            }, () => {
                this.queryFormRef.onSetDefault({
                    ...queryForm
                })
                this.getData()
            })
        } else {
            this.getData()
        }
    }
    view(id, type) {

        this.props.history.push('/storageManager/outPut/add/' + id + '/' + type)
    }
    getData(values) {
        let { pageNo, pageSize } = this.state.pageData
        this.setState({
            queryForm: values === undefined ? this.state.queryForm : { ...values }
        }, async () => {
            const params = {
                pageNo, pageSize, queryForm: this.state.queryForm
            }
            store.dispatch({
                type: 'SaveSearchValues',
                data: {
                    pathName: 'storageOutPut',
                    ...params
                }
            })
            let res = await apiStockOutLibraryPage({
                pageNo, pageSize, ...this.state.queryForm
            })
            if (res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    total: res.totalCount
                })
            }
        })



    }
    del(row) {
        React.$confirm({
            title: "提示",
            type: 'warning',
            content: "确定是否删除？",
            onOk: async () => {
                let res = await apiStockOutLibraryDel({ id: row.id })
                if (res.code === 0) {
                    this.pageChange(1, 10)
                    React.$message({
                        type: 'success',
                        content: res.codeMessage
                    })
                } else {
                    React.$message({
                        type: 'warning',
                        content: res.codeMessage
                    })
                }
            }
        });
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.getData()
        })
    };
    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }
    onFinishSearch() {
        let values = this.formRef_search.current.getFieldsValue()
        this.setState({
            code: values.code
        }, () => {
            this.pageChange(1, 10)
        })
    }
    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }

    render() {
        let { columns, dataSource, pageData, total, form_show, searchOption, newColumns } = this.state
        return (
            <div className="p-layout-box commodity-examine">
                {/* <Form layout={'inline'} ref={this.formRef_search} onFinish={() => this.onFinishSearch()} style={{ marginBottom: 12 }}>
                    <Form.Item name={"code"}>
                        <Input style={{ width: 140 }} suffix={<SearchOutlined />} placeholder={"出库单号"} />
                    </Form.Item>
                    <Form.Item>
                        <Space size="small" style={{ marginLeft: 10 }}>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button onClick={() => this.resetSearch()}>重置</Button>
                        </Space>
                    </Form.Item>
                </Form> */}
                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                    onReset={() => this.onReset()}
                    onGetValues={(values) => this.getData(values)} >
                </TheQueryForm>
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                    onTableRefresh={() => this.getData()}
                    onColumnsFilter={(value) => this.onColumnsFilter(value)}
                >
                    <TheButton haspermi={['storage:outPut:add']} size="middle" onClick={() => this.props.history.push('/storageManager/outPut/add/null/2')} type="primary">新增</TheButton>

                </TheTableExtend>
                {/* <div style={{ marginBottom: 12 }}>
                    <TheButton haspermi={['storage:outPut:add']} size="middle" onClick={() => this.props.history.push('/storageManager/outPut/add/null/2')} type="primary">新增</TheButton>
                </div> */}
                <TheTable
                    scroll={{ x: "max-content", y: '63vh' }}
                    columns={newColumns}
                    dataSource={dataSource}
                />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
            </div>
        );
    }
}
export default OutPut
